<script setup lang="ts">
import Versions from './components/Versions.vue'
import { ref } from 'vue'
const { ipcRenderer } = window.electron

const ipcHandle = (): void => window.electron.ipcRenderer.send('ping')

const idNumber = ref('')
const showKeyBoard = () => {
  ipcRenderer.send('show-keyboard')
}
const hideKeyBoard = () => {
  ipcRenderer.send('hide-keyboard')
}
const toggleInputMethod = () => {
  console.log('切换输入法')
  ipcRenderer.send('toggle-input-method')
}
</script>

<template>
  <img alt="logo" class="logo" src="./assets/electron.svg" />
  <input
    v-model="idNumber"
    type="text"
    placeholder="请输入"
    @focus="showKeyBoard"
    @blur="hideKeyBoard"
  />
  <button @click="hideKeyBoard">隐藏键盘</button>
  <button @click="showKeyBoard">显示键盘</button>
  <button @click="toggleInputMethod">切换输入法</button>
  <div class="creator">Powered by electron-vite</div>
  <div class="text">
    Build an Electron app with
    <span class="vue">Vue</span>
    and
    <span class="ts">TypeScript</span>
  </div>
  <p class="tip">Please try pressing <code>F12</code> to open the devTool</p>
  <div class="actions">
    <div class="action">
      <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">Documentation</a>
    </div>
    <div class="action">
      <a target="_blank" rel="noreferrer" @click="ipcHandle">Send IPC</a>
    </div>
  </div>
  <Versions />
</template>
